<template lang="pug">
  li.table-record.clearfix(
    :class="{'hover':isHover}"
    @click="$emit('click')"
    @mouseover="$emit('mouseover')"
    @contextmenu.prevent="$emit('contextmenu')")
    slot
</template>

<script>
export default {
  name: 'v-tr',
  props: {
    isHover: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="sass">
.table-record
  position: relative
  border-left: none
  border-top: 1px solid #ddd
  &.hover
    >div
      background: #eaeff3
  .table-caption,.table-data
    float: left
    height: 35px
    line-height: 35px
    padding: 0px 9px
    border-left: 1px solid #ddd
    &:first-child
      border-left: none
  .table-data
    background-color: #fff
  .table-caption
    background-color: #e8ecef
    color: #555
  &:first-child
    border-top: none
  &:nth-child(2n)
    .table-data
      background-color: #f7f8fa
// 小表格样式
.table-xxs
  .table-record
    position: relative
    border-left: none
    border-top: 1px solid #ddd
    &.hover
      >div
        background: #eaeff3
    .table-caption,.table-data
      float: left
      height: 24px !important
      line-height: 24px !important
      padding: 0px 9px
      border-left: 1px solid #ddd
      &:first-child
        border-left: none
    .table-data
      background-color: #fff
    .table-caption
      height: 30px !important
      background-color: #e8ecef
      color: #555
    &:first-child
      border-top: none
    &:nth-child(2n)
      .table-data
        background-color: #f7f8fa
// .table-body .table-record:last-child
//   border-bottom: 1px solid #ddd
</style>
